<template>
    <div class="box">
        <p class="title">{{typeObj[type]}}</p>
        <ul class="content-box">
            <li v-for="book in books" :key="book.id" >
                <img :src="book.img">
                <p>{{book.name}}</p>
                <p>¥:{{book.price}}</p>
            </li>
        </ul>
    </div>
</template>
<script>

export default {
    name:"Books",
    props:{
        type:String
    },
    data(){
        return {
          typeObj:{
              "hot":"热卖",
              "new":"最新"
          },
          books:[]
        }
    },
    created(){

        fetch("http://localhost:3000/books?type="+this.type,{
            method:"get"
        })
        .then(res=>{
            // res:响应对象，里面包括了后端返回的数据
            return res.json();//把后端返回的数据转成json格式，并返回出去。
        })
        .then(data=>{
            // data:就是上一级then的返回值
            this.books = data;
        })     
    }    
}
</script>


<style scoped>

.box{
    width: 100%;
    height: 1.6rem;
}

.title{
    width: 1rem;
    height: 0.4rem;
    background-color: pink;
}

.content-box{
    width: 100%;
    height: 1.2rem;
    display: flex;
    justify-content: space-around;
}

.content-box li{
    flex: 1;
    border:1px solid pink;
}

.content-box img{
    width: 100%;
    height:0.7rem;

}

.content-box p{
    text-align: center;
    height: 0.25rem;
}

</style>


